<template>
	<div class="box" style="padding-top:20px;width:70%;margin:0 auto">
		<div v-for="(item, index) in shopListDropDownMenu" 
			:key="index" 
			class="storeItemList"
			:class='{"clickSpecialDiv":index===indexNumNum}'>
			<span @click="shopClickEvent(item,index)" :class='{"clickSpecial":index===indexNumNum ,"initShow":item.storeCode === initStoreCode && indexNumNum===""}'>
			{{item.name}}
			</span>
		</div>
	</div>
</template>
<script>
	import DropDownMenu from "../../../edit-components/DropdownMenu";
	import axios from "axios";
	import { mapGetters } from "vuex";
	import setSpecialTemplateParams from "../../../utils/lxn/setSpecialTemplateParams"
	import mergeRouter from "../../../utils/settings/mergeRouter";
	import setRouterLifeCycle from "../../../utils/setRouterLifeCycle/index"
	export default {
		data() {
			return {
				typeDropDownMenu: [{
						name: "H5"
					},
					{
						name: "RN"
					}
				],
				shopListDropDownMenu: [],
				indexNumNum:'',
			}
		},
		computed: {
			...mapGetters('qxz', {
				getStoreList: 'getStoreList'
			}),
			...mapGetters("lxn", [
				"getstoreCodeIndex"
			]),
			initStoreCode(){
				return window.api.storeCode
			},
		},
		methods: {
			typeClickEvent(item) {
				this.$emit("typeChange", item);
			},
			async shopClickEvent(item,index) {
				this.$emit("shopChange", item);
				await this.getTemplate(item.storeCode)
				//设置门店id
				window.api.storeCode = item.storeCode
				window.api.storeId = item.storeId
				localStorage.setItem("storeCode", item.storeCode);
				localStorage.setItem("storeId", item.storeId);
				localStorage.setItem("storeName", item.name);
				this.indexNumNum = index;
				//点击切换门店时初始化是否需要上传一套特殊模板
				setSpecialTemplateParams();
				let mergeRouterSpecial  = mergeRouter();
				this.$router.options.routes[4].children.push(...mergeRouterSpecial);
				this.$router.addRoutes(this.$router.options.routes);
			},
			//获取门店信息
			getstorecode() {
				let url = api.base_host + '/baseStore/findAllStore'
				// let url = api.base_host + '/baseStore/getRestStore';
				let config = {
					url: url,
					method: 'GET',
					headers: {
						sessionId: getCookie("sessionId")
					},
				};
				axios(config).then((res) => {
					var arrdata = res.data.data
					var arr = []
					for(var i = 0; i < arrdata.length; i++) {
						let obj = {
							name: arrdata[i].storeName,
							storeCode: arrdata[i].storeCode,
							storeId: arrdata[i].storeCode,
						}
						arr.push(obj)
					}
					this.shopListDropDownMenu = arr
					// console.log("aaaaa",this.shopListDropDownMenu)
				})
			},
			//获取模板信息
			getTemplate(storeCode) {
				let url = api.base_host + '/templateConfig/selectTemplateConfigList';
				let config = {
					url: url,
					method: 'GET',
					headers: {
						sessionId: getCookie("sessionId")
					},
					params: {
						storeCode: storeCode
					}
				};
				return axios(config).then((res) => {
					this.$store.commit('setConfigParams', Object.assign(
						this.$store.getters.getConfigParams, {
							templateConfigList: res.data.data
						}
					));
				});
			}
		},
		components: {
			"down-menu": DropDownMenu
		},
		mounted() {
			this.getstorecode()
		},
		watch:{
			getstoreCodeIndex( val,oldval){
				this.indexNumNum = val
			}
		}
	}
</script>
<style scoped>
	.title {
		font-size: 14px;
	}
	.storeItemList{
		display:inline-block;
		border-radius: 4px;
		margin: 0 10px;
		background-color: rgba(22, 155, 213, 1);
		cursor:pointer;
		margin-top:10px;
	}
	.storeItemList>span{
		display:inline-block;
		padding:7px 10px;
		color:#fff;
	}
	.clickSpecial{
		background-color: #A974A2;
	}
	.clickSpecialDiv{
		background-color: #A974A2;
		border:1px solid #A974A2;
	}
	.initShow{
		background: #A974A2;
		border-radius: 4px;
	}
</style>